<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <header>
        <input type="text" placeholder="搜索商品名或粘贴淘宝标题"> 
    </header>
    <section>
        <ul>
            <li>优选榜单</li>
            <li>女装</li>
            <li>女鞋</li>
            <li>男鞋单</li>
            <li>女装护理</li>
            <li>女装</li>
            <li>男装</li>
            <li>童装</li>
            <li>母婴</li>
            <li>百货</li>
            <li>箱包</li>
            <li>内衣</li>
            <li>配饰</li>
            <li>优选榜单</li>
            <li>优选榜单</li>
            <li>优选榜单</li>
            <li>优选榜单</li>
            <li>优选榜单</li>
            <li>优选榜单</li>
            <li>优选榜单</li>
        </ul>
        <div>
            <p>优选榜单</p>
            <main>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
            </main>
            <p>优选榜单</p>
            <main>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
            </main>
            <p>优选榜单</p>
            <main>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
                <div>
                    <img src="img/pic1.png" alt="">
                    <p>潮流穿搭</p>
                </div>
            </main>
        </div>
    </section>
    <footer>
        <ul style="display: flex;justify-content: space-between;">
            <li><a href="./index.html"><img src="./img/home.png" alt=""><span> 首页</span></a></li>
            <li><a href="./classification.html"><img src="./img/classification.png" alt=""> <span>分类</span></a></li>
            <li><a href="./cart.html"><img src="./img/cart.png" alt=""> <span>购物车</span></a></li>
            <li><a href="./my.html"><img src="./img/my.png" alt=""> <span>我的</span></a></li>
        </ul>
    </footer>
</body>

</html>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    ul {
        list-style: none;
    }
    
    img {
        vertical-align: middle;
    }
    
    a {
        text-decoration: none;
    }
    
    input {
        outline: none;
        border: 0;
    }
    
    html,
    body {
        height: 100%;
    }
    
    body {
        display: flex;
        flex-direction: column;
    }
    
    .wnqc::after {
        content: "";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
    
    /* 头部 */
    header {
        height: 44px;
        background-image: url(../img/bgc2.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        line-height: 44px;
        background-color: #ff5d32; 
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
    }
    
    header input {
        /*注意是百分比*/
        width: 92%;
        height: 30px;
        background-color: #fff;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        /* margin: auto; */
        border-radius: 15px;
        background-image: url(../img/search1.png);
        background-repeat: no-repeat;
        background-size: 15px 15px;
        /* 设置百分比 */
        background-position: 20% center;
        /* color: teal; */
    }
    
    /* 更改placeholder颜色 */
    /* input::-webkit-input-placeholder{
        color: violet;
    } */
    
    section {
        flex: 1;
        /* background-color: rgb(233, 155, 155); */
        display: flex;
        /* 添加滚动条 */
        overflow: auto;
    
    }
    
    section ul {
        /* 给固定的宽度 */
        width: 90px;
        background-color: #f6f6f6;
        /* 添加滚动条 */
        overflow: auto;
    }
    
    section ul li {
        line-height: 48px;
        text-align: center;
        color: #616161;
        font-size: 14px;
    }
    
    section ul li:hover {
        background-image: url(../img/bgc3.png);
        background-repeat: no-repeat;
        background-size: 4px 4px;
        background-position: 5px center;
        background-color: #fff;
        color: #fd2a24;
    }
    
    section>div {
        flex: 1;
        background-color: #fff;
        /* 添加滚动条 */
        overflow: auto;
    }
    
    section>div>p {
        line-height: 62px;
        /* background-color: rgb(185, 50, 50); */
        font-size: 12px;
        font-weight: bold;
        padding-left: 26px;
    }
    
    section>div>main {
        height: 250px;
        /* background-color: rgb(224, 151, 151); */
        display: flex;
        flex-wrap: wrap;
    }
    
    section>div>main>div {
        width: 33.33%;
        height: 125px;
        /* border: 1px solid #000; */
        box-sizing: border-box;
        text-align: center;
    
    }
    
    section>div>main>div>img {
        width: 61px;
        margin-top: 15px;
    }
    
    section>div>main>div>p {
        font-size: 12px;
        color: #061b28;
        line-height: 26px;
    }
    
    
    /* 隐藏移动端的滚动条 */
    ::-webkit-scrollbar{
        display: none;
    }
    /* 尾部 */
    footer {
        /* height: 59px; */
        /* background-color: rgb(207, 40, 40); */
        /* display: flex;
        justify-content:space-around;
        align-items: center; */
    }
    footer>div{
        /* width: 30px;
        height: 49px; */
        /* background-color: rgb(211, 130, 130); */
        /* font-size: 17px;
        text-align: center;
        padding-top: 9px;
        box-sizing: border-box;
        color: #777777; */
    }
    footer>div:hover{
        /* color: #ff2725; */
    }
    footer>div>p{
        /* font-size: 10px; */
    }
    </style>